<template>
	<div>
		<div class="container">
			<div class="handle-box">
				<!-- <el-select v-model="comment.address" placeholder="地址" class="handle-select mr10">
					<el-option key="1" label="宁夏省" value="宁夏省"></el-option>
					<el-option key="2" label="甘肃省" value="甘肃省"></el-option>
				</el-select> -->
				<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
				<el-button type="primary" :icon="Plus">新增</el-button>
			</div>
			<el-table :data="contentData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="commentId" label="评论ID" width="100" align="center"></el-table-column>
				<el-table-column prop="goodsId" label="商品ID" width="100" align="center"></el-table-column>
				<el-table-column prop="goodsName" label="商品名称" align="center"></el-table-column>
				<el-table-column prop="commentTime" label="评论时间" align="center" :width="160"></el-table-column>
				<el-table-column prop="sellerId" label="卖家ID" align="center"></el-table-column>
				<el-table :data="contentData" border class="table" ref="multitipleTable"
					header-cell-class-name="table-header"></el-table>
				<el-table-column prop="content" label="评论" align="center" :width="200"></el-table-column>
				<el-table-column prop="level" label="评分" align="center"></el-table-column>
			</el-table>
			<!-- 分页 current-page、page-size（每页条数）、total（总条数） -->
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="comment.pageNum"
					:page-size="comment.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>

			<div class="pagination">
				<el-pagination
					background
					layout="total, prev, pager, next"

					:current-page="comment.pageIndex"
					:page-size="comment.pageSize"

					:total="pageTotal"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
		</div>
		<!-- 编辑弹出框 -->
		<el-dialog :title="dialogTitle" v-model="editVisible" width="80%">
			<el-form label-width="70px">
				<el-form-item label="商品ID">
					<el-input v-model="form.goodsId"></el-input>
				</el-form-item>
				<el-form-item label="用户">
					<el-input v-model="form.userId"></el-input>
				</el-form-item>
				<el-form-item label="卖家ID">
					<el-input v-model="form.sellerId" type="textarea" :rows="5"></el-input>
                </el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import { fetchData } from '../api/index';
import http from '../utils/request';

interface TableItem {
	commentId: number;
	goodsId: number;
	userId: number;
	sellerId: number;
	goodsName: string;
	commentImg: string;
	commentTime: string;
	content: string;
	level: number
}

const comment = reactive({
	commentId: '',
	goodsId: '',
	userId: '',
	sellerId: '',
	goodsName: '',
	commentImg: '',
	commentTime: '',
	content: '',
	level: '',
	pageIndex: 1,
	pageSize: 10,
	pageNum: 1
});
const contentData = ref<TableItem[]>([]);
// const tableData = ref<TableItem[]>([]);
const pageTotal = ref(0);
const getComments = () => {
	http.get("admin/comment/list", {
		params: comment
	}).then((res: any) => {
		console.log('获取评论信息 res = ', res);
		contentData.value = res.data.data;
		pageTotal.value = res.data.data.total;	//
	}).catch((err: any) => {
		console.log('获取评论信息 res = ', err)
	})
};
getComments();

// 查询操作
const handleSearch = () => {
	comment.pageIndex = 1;
	getComments();
};
// 分页导航
const handlePageChange = (val: number) => {
	comment.pageIndex = val;
	getComments();
};
// 表格编辑时弹窗和保存
const dialogTitle = ref('新增');
const editVisible = ref(false);
let form = reactive({
	commentId: '',
	goodsId: '',
	userId: '',
	sellerId: '',
	goodsName: '',
	commentTime: '',
	content: '',
	level: '',
});
const handleAdd = () => {
	dialogTitle.value = "新增";
	form.commentId = '';
	form.goodsId = '';
	form.userId = '';
	form.sellerId = '';
	form.goodsName = '';
	form.content = '';
	form.level = '';
	editVisible.value = true;
};
const handleEdit = (index: number, row: any) => {
	dialogTitle.value = "编辑";
	form.commentId = row.commentId
	form.goodsId = row.goodsId;
	form.userId = row.userId;
	form.sellerId = row.sellerId;
	form.goodsName = row.goodsName;
	form.content = row.content;
	form.level = row.level;
	editVisible.value = true;
};


// row(行对象), column（列对象）, cellValue（当前单元格内容，简介）, index（下标）
const getIntroduction = (row: any, column: any, cellValue: any, index: any) => {
	console.log("格式化简介内容", row, column, cellValue.length, index);
	if (cellValue.length > 50) {
		return cellValue.substr(0, 50) + '...';
	}
	return cellValue;
}

</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}

.table {
	width: 100%;
	font-size: 14px;
}

.red {
	color: #ff0000;
}

.mr10 {
	margin-right: 10px;
}

.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>
